<style>
@import '/pages/professional/index.css';
</style>
<template>
	<view class="professional-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="user-info">
				<image class="avatar" src="/static/avatar-default.png"></image>
				<text class="welcome">欢迎回来，志愿者</text>
			</view>
			<view class="search-box">
				<input type="text" placeholder="输入搜索的关键词" />
			</view>
		</view>

		<!-- 主要功能区 -->
		<scroll-view scroll-y class="main-content">
			<!-- 专业指导模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">专业指导</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="function-cards">
					<view class="function-card" @click="navigateTo('/pages/professional/careMethod')">
						<image class="card-image" src="/static/care-method.png"></image>
						<text class="card-title">照护方式</text>
					</view>
					<view class="function-card" @click="navigateTo('/pages/professional/communication')">
						<image class="card-image" src="/static/communication-skill.png"></image>
						<text class="card-title">沟通技巧</text>
					</view>
					<view class="function-card" @click="navigateTo('/pages/professional/psychotherapy')">
						<image class="card-image" src="/static/psychotherapy.png"></image>
						<text class="card-title">心理疗法</text>
					</view>
				</view>
			</view>

			<!-- 症状管理模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">症状管理</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="symptom-cards">
					<view class="symptom-card" @click="navigateTo('/pages/professional/symptoms/physical')">
						<view class="symptom-icon physical-icon">身</view>
						<text class="symptom-name">身体症状</text>
					</view>
					<view class="symptom-card" @click="navigateTo('/pages/professional/symptoms/mental')">
						<view class="symptom-icon mental-icon">心</view>
						<text class="symptom-name">心理症状</text>
					</view>
					<view class="symptom-card" @click="navigateTo('/pages/professional/symptoms/social')">
						<view class="symptom-icon social-icon">社</view>
						<text class="symptom-name">社会症状</text>
					</view>
					<view class="symptom-card" @click="navigateTo('/pages/professional/symptoms/spiritual')">
						<view class="symptom-icon spiritual-icon">灵</view>
						<text class="symptom-name">灵性症状</text>
					</view>
				</view>
			</view>

			<!-- 团队协作模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">团队协作</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="team-cards">
					<view class="team-card" @click="navigateTo('/pages/professional/team/cases')">
						<image class="team-image" src="/static/case-sharing.png"></image>
						<text class="team-title">案例分享</text>
					</view>
					<view class="team-card" @click="navigateTo('/pages/professional/team/discussion')">
						<image class="team-image" src="/static/team-discussion.png"></image>
						<text class="team-title">团队讨论</text>
					</view>
					<view class="team-card" @click="navigateTo('/pages/professional/team/resources')">
						<image class="team-image" src="/static/resource-sharing.png"></image>
						<text class="team-title">资源共享</text>
					</view>
				</view>
			</view>

			<!-- 后续处理模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">后续处理</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="aftercare-cards">
					<view class="aftercare-card" @click="navigateTo('/pages/professional/aftercare/familySupport')">
						<image class="aftercare-image" src="/static/family-support.png"></image>
						<text class="aftercare-title">家属支持</text>
					</view>
					<view class="aftercare-card" @click="navigateTo('/pages/professional/aftercare/griefCounseling')">
						<image class="aftercare-image" src="/static/grief-counseling.png"></image>
						<text class="aftercare-title">哀伤辅导</text>
					</view>
					<view class="aftercare-card" @click="navigateTo('/pages/professional/aftercare/referral')">
						<image class="aftercare-image" src="/static/referral.png"></image>
						<text class="aftercare-title">转介服务</text>
					</view>
				</view>
			</view>

			<!-- AI助手模块 -->
			<view class="ai-assistant-section" @click="navigateTo('/pages/professional/aiChat')">
				<view class="ai-card">
					<view class="ai-icon">🤖</view>
					<view class="ai-info">
						<text class="ai-title">AI智能助手</text>
						<text class="ai-desc">获取专业建议，辅助临床决策</text>
					</view>
					<view class="ai-arrow">></view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<view class="tab-icon">🏠</view>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/professional/patients')">
				<view class="tab-icon">👥</view>
				<text class="tab-text">患者管理</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/professional/aiChat')">
				<view class="tab-icon">💬</view>
				<text class="tab-text">AI对话</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/professional/profile')">
				<view class="tab-icon">👤</view>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		navigateTo(url) {
			// 判断是否是底部导航栏的页面
			if (url.includes('/pages/professional/index') ||
				url.includes('/pages/professional/patients') ||
				url.includes('/pages/professional/aiChat') ||
				url.includes('/pages/professional/profile')) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
}
</script>